
<template>
  <div class="set">
    <div class="top">
      <van-icon @click="$router.back()" name="arrow-left" />
      <p>设置密码</p>
    </div>
    <form>
      <div class="one" :class="{ active: active == 1 }">
        <input
          type="text"
          v-model="form.mobile"
          placeholder="请输入手机号"
          @blur="active = ''"
          @focus="active = 1"
        />
        <div v-if="flag" @click="getCode" style="color: #eb6100">
          获取验证码
        </div>
        <div v-else>获取验证码({{ timer }})</div>
      </div>
      <div class="two" :class="{ active: active == 2 }">
        <input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          @blur="active = ''"
          @focus="active = 2"
        />
      </div>
      <div class="two" :class="{ active: active == 3 }">
        <input
          v-model="form.sms_code"
          type="text"
          placeholder="请输入短信验证码"
          @blur="active = ''"
          @focus="active = 3"
        />
      </div>
      <div class="btn" @click="login">确定</div>
    </form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getPassword, getAppCode } from "@/utils/api.js";
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
export default {
  name: "",
  components: {},
  data() {
    return {
      timer: 60,
      flag: true,
      form: {
        mobile: "",
        sms_code: "",
        password: "",
        sms_type: "login",
        type: 2, //验证码登录
        client: 1,
      },
      active: "", //判断
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 获取验证码
    getCode() {
      if (!reg.test(this.form.mobile)) {
        Toast.fail("不是手机号");
      } else {
        getAppCode(this.form).then((res) => {
          console.log(res);
        });
        const t = setInterval(() => {
          this.flag = false;
          if (this.timer > 0) {
            this.timer--;
          } else {
            this.timer = 60;
            this.flag = true;
            clearInterval(t);
          }
        }, 1000);
      }
    },
    // 确定
    login() {
      getPassword(this.form).then((res) => {
        console.log(res);
        if(res.data.code==200){
          this.$router.push('/login')
        }
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.set {
  .top {
    display: flex;
    align-items: center;
    padding: 10px;
    p {
      width: 90%;
      text-align: center;
    }
  }
  form {
    width: 83%;
    margin: 20px auto;
    .one {
      height: 72px;
      display: flex;
      line-height: 72px;
      border-bottom: 1px solid #f1f1f1;
      input {
        border: none;
        flex: 1;
      }
    }
    .two {
      height: 56px;
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      input {
        border: none;
        flex: 1;
      }
    }

    .btn {
      text-align: center;
      line-height: 64px;
      color: #fff;
      width: 622px;
      height: 64px;
      margin: 50px auto;
      background-image: url("@/assets/theme-img/login-btn.png");
      background-size: 100% 100%;
    }
    .active {
      border-bottom: 1px solid #eb6100;
    }
  }
}
</style>
